<template>
  <div id="shuxing">
    <ul :list="list" class="nav">
	  <li v-for=" n in list"><router-link class="nav-item" v-bind:to="n.url">{{n.name}}</router-link></li>
	</ul>
  </div>
</template>
 
<script>
import highchartsData from './chart-options/highchartsData'
export default {
  name: 'shuxing',
  data() {
   /*let list=highchartsData.data.list;
   console.log(list);*/
    return {
     
    }
  },
  props:["list"]
}
</script>
 
<style>
    ul.nav{  
        padding:0px;  
        margin:0px;  
        list-style-type:none;  
        width:80px;  
        background-color:#8bd400;  
        border:1px solid #486b02;  
    }  
    /*IE6在列表项的上下添加了额外的空间，为了修复这个BUG，需要将列表上的display属性设置为inline*/  
    ul.nav li{  
        display: inline;  
    } 
    /*不对列表项应用样式 而是对其中包含的锚链接应用样式，由此提供更好的浏览器兼容性*/  
    ul.nav a{  
        display: block;  
        color:#2B3f00;  
        text-decoration:none;  
        border-top:1px solid #e4ffd3;  
        border-bottom:1px solid #486b02;  
        
        padding:5px 10px;  
    }  
	
	    /*解决最后一个链接的底边框与列表的底边框形成双线的问题*/  
    ul.nav {  
        border:0;  
    } 
	
 ul.nav a:hover,ul nav a:focus,ul.nav .selected a{  
        color:#e4ffd3;  
        background-color:#6da203;  
  
     }  
	

</style>